<template>
  <div id="mse"></div>
</template>
<script lang="ts" setup>
  import { onMounted } from 'vue';
  import Player from 'xgplayer';
  import 'xgplayer/dist/index.min.css';
  import HlsPlugin from 'xgplayer-hls';
  // import VideoPlay from '~icons/ep/video-play';
  onMounted(() => {
    new Player({
      id: 'mse',
      lang: 'zh',
      // 默认静音
      volume: 0,
      autoplay: false,
      screenShot: true,
      videoAttributes: {
        crossOrigin: 'anonymous',
      },
      width: '100%',
      url: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4', //https://media.wxzxzj.com/the_garden_of_words_trailer_english__1080p.m3u8
      poster: '//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
      //  fluid: deviceDetection(),
      //传入倍速可选数组
      playbackRate: [0.5, 0.75, 1, 1.5, 2],
      // plugins: [HlsPlugin],
      // hls: {
      //   // hls 插件参数
      // },
    });
  });
</script>
